<template>
  <div class="questions">
    <div class="top_container">
      <div class="category">
        <ul class="category_list">
          <li
            v-for="item in subjectCategory"
            :key="item.id"
            @click="changeData(item.id)"
            :style="{
              background: `url('${item.imageUrl}')`,
              backgroundSize: 'cover',
            }"
          >
            <p>{{ item.categoryName }}</p>
            <p style="font-size: 12px">{{ item.count }} 道题</p>
          </li>
        </ul>
      </div>
      <div class="category_label">
        <div class="label" ref="label">
          <el-row
            v-for="(category, index) in categoryAndLabel"
            :key="category.id"
            style="margin: 15px 0"
            class="label_row"
            v-show="!isLoad ? index < 3 : true"
          >
            <el-col :span="3" style="font-weight: 600"
              >{{ category.categoryName }}：</el-col
            >
            <el-col :span="21">
              <span
                v-for="(label, index) in category.labelDTOList"
                :key="index"
                @click="changeSubject(label.id, category.id)"
                :class="labelActive == label.id ? 'active' : ''"
                >{{ label.labelName }}</span
              >
            </el-col>
          </el-row>
        </div>
        <div class="more" v-if="categoryAndLabel.length > 3">
          <el-divider>
            <span style="cursor: pointer" @click="loadMore">{{
              !isLoad ? "展开" : "收起"
            }}</span>
            <el-icon v-if="!isLoad"><CaretBottom /></el-icon>
            <el-icon v-else><CaretTop /></el-icon>
          </el-divider>
        </div>
      </div>
    </div>
    <div class="bottom_container">
      <el-divider v-if="subjectPageData.length > 0" />
      <div class="header_title" v-if="subjectPageData.length > 0">
        <div class="fist_col">
          <font>题目</font>
          <font>(当前 {{ subjectPageData.length }} 道题)</font>
        </div>
        <div class="last_col">
          <el-dropdown ref="dropdown" trigger="contextmenu" style="color: #000">
            <span class="el-dropdown-link"> 难度 </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="getSubject(1)">初级</el-dropdown-item>
                <el-dropdown-item @click="getSubject(2)">中级</el-dropdown-item>
                <el-dropdown-item @click="getSubject(3)">高级</el-dropdown-item>
                <el-dropdown-item @click="getSubject(4)">资深</el-dropdown-item>
                <el-dropdown-item @click="getSubject(5)">专家</el-dropdown-item>
                <el-dropdown-item divided @click="getSubject(0)"
                  >全部</el-dropdown-item
                >
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <i class="iconfont" @click="showClick">&#xe866;</i>
        </div>
      </div>
      <div class="questions_container">
        <div
          class="row-item"
          v-for="(item, index) in subjectPageData"
          :key="item.id"
          @click="toSubjectDetail(item)"
        >
          <div class="row-item-title">
            <div class="item-title">{{ item.subjectName }}</div>
            <div class="item-tag">
              <el-tag
                class="tag"
                round
                :type="
                  index % 5 == 1
                    ? 'success'
                    : index % 5 == 2
                    ? 'primary'
                    : index % 5 == 3
                    ? 'danger'
                    : index % 5 == 4
                    ? 'info'
                    : 'warning'
                "
                v-for="(label, idx) in item.labelName"
                :key="idx"
                >{{ label }}</el-tag
              >
            </div>
          </div>
          <div class="row-item-level">
            <el-tag effect="dark" v-if="item.subjectDifficult == 1"
              >初级</el-tag
            >
            <el-tag
              effect="dark"
              v-if="item.subjectDifficult == 2"
              type="success"
              >中级</el-tag
            >
            <el-tag
              effect="dark"
              v-if="item.subjectDifficult == 3"
              color="#626aef"
              style="border: 1px solid #626aef"
              >高级</el-tag
            >
            <el-tag
              effect="dark"
              v-if="item.subjectDifficult == 4"
              type="warning"
              >资深</el-tag
            >
            <el-tag effect="dark" v-if="item.subjectDifficult == 5" type="error"
              >专家</el-tag
            >
          </div>
        </div>
        <el-divider style="border: none">
          <span v-if="subjectPageData.length > 0">我是有底线的 ( :</span>
        </el-divider>
      </div>
    </div>

    <component :is="Load" v-if="subjectPageData.length <= 0"></component>
  </div>
</template>

<script setup>
import { ref } from "vue";
import {
  queryPrimaryCategory,
  queryCategoryAndLabel,
  getSubjectPage,
} from "@/api/subject/subject.js";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import Load from "@/components/Load.vue";

let $router = useRouter();

// 是否显示更多label行
let isLoad = ref(false);
// 难度的下拉菜单实例
let dropdown = ref();
// 当前是用户点击的是第几个label,传入一个id  使用id做判断做高亮显示
let labelActive = ref("");

// 服务器返回的分类大类
let subjectCategory = ref({});

// 获取子级分类及标签的数据
let categoryAndLabelDTO = ref({
  id: "",
});

// 服务器返回的子级分类和分类标签
let categoryAndLabel = ref([]);

// 获取题目列表的数据
let subjectPageDTO = ref({
  page: 1,
  pageSize: 20,
  categoryId: "", // 子分类id
  labelId: "", // 标签id
  subjectDifficult: "", // 题目难度 1 2 3 4 5
  subjectType: 4,
});

// 服务器返回的题目列表
let subjectPageData = ref([]);

// 显示更多label
const loadMore = () => {
  isLoad.value = !isLoad.value;
};

// 控制难度的下拉菜单是否展开
const showClick = () => {
  if (!dropdown.value) return;
  dropdown.value.handleOpen();
};

// 初始化页面
const init = () => {
  // 查询父分类
  getPrimaryCategory();
};

// 更换题目同时更换label样式
const changeSubject = (labelId, categoryId) => {
  subjectPageDTO.value.labelId = labelId;
  subjectPageDTO.value.categoryId = categoryId;
  // label 做高亮显示
  labelActive.value = labelId;
  // 重新获取题目列表
  getSubject();
};

// 根据父分类id切换子分类和label信息
const changeData = (id) => {
  categoryAndLabelDTO.value.id = id;
  getCategoryAndLabel();
};

// 跳转至题目详情页
const toSubjectDetail = (data) => {
  let labelId = subjectPageDTO.value.labelId;
  let categoryId = subjectPageDTO.value.categoryId;
  window.open(
    "/#/subjectDetail?id=" +
      data.id +
      "&categoryId=" +
      categoryId +
      "&labelId=" +
      labelId
  );
};

// 获取分类大类
const getPrimaryCategory = () => {
  let subjectCategoryDTO = {
    categoryType: "1", // 1 父级分类 2 子级分类
  };

  queryPrimaryCategory(subjectCategoryDTO).then((res) => {
    if (res.code == 200) {
      subjectCategory.value = res.data;
      // 查询成功后使用父级id查询子级分类和分类标签
      categoryAndLabelDTO.value.id = res.data[0].id;
      // 查询子分类及标签
      getCategoryAndLabel();
    } else {
      ElMessage.error(res.message);
    }
  });
};

// 获取子分类及标签
const getCategoryAndLabel = () => {
  queryCategoryAndLabel(categoryAndLabelDTO.value).then((res) => {
    if (res.code == 200) {
      if (res.data.length == 0) {
        ElMessage.warning("该分类正在等你上传题目~");
        return;
      }
      categoryAndLabel.value = res.data;
      // 查询成功后使用子级分类id和第一个labelid获取题目列表进行初始化
      subjectPageDTO.value.categoryId = res.data[0].id; // 子级分类id
      subjectPageDTO.value.labelId = res.data[0].labelDTOList[0].id; // 子级分类label id
      labelActive.value = res.data[0].labelDTOList[0].id; // 做高亮显示
      // 查询题目列表
      getSubject();
    } else {
      ElMessage.error(res.message);
    }
  });
};

// 获取题目列表
const getSubject = (difficult) => {
  if (difficult !== 0) {
    subjectPageDTO.value.subjectDifficult = difficult;
  }

  if (difficult == 0) {
    subjectPageDTO.value.subjectDifficult = "";
  }

  getSubjectPage(subjectPageDTO.value).then((res) => {
    if (res.code == 200) {
      if (res.data.result.length > 0) {
        subjectPageData.value = res.data.result;
      } else {
        ElMessage.warning("暂无该难度的题目...");
      }
    } else {
      ElMessage.error(res.message);
    }
  });
};

init();
</script>

<style scoped lang="scss">
.questions {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow: scroll;

  .top_container {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    .el-divider {
      margin: 0;
      margin-top: 35px;
    }
    .category {
      width: 100%;
      ul.category_list {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        li {
          width: 150px;
          height: 80px;
          border-radius: 10px;
          margin: 0 45px 0 0;
          box-sizing: border-box;
          padding-left: 20px;
          margin-top: 10px;
          cursor: pointer;
          p {
            color: #fff;
          }
        }
      }
    }
    .category_label {
      width: 100%;
      height: auto;
      margin-top: 40px;
      .label {
        font-size: 15px;
        span {
          font-size: 13px;
          display: inline-block;
          padding: 0 8px;
          height: 25px;
          cursor: pointer;
          text-align: center;
          line-height: 23px;
          margin-right: 10px;
          transition: all 0.3s;
        }
        span.active {
          color: #fff;
          background-color: #1677ff;
          border-radius: 5px;
        }
        span.active:hover {
          color: #fff;
          background-color: #3b8dff;
        }
        span:hover {
          color: #1622ff;
          background-color: #dcdcdc92;
          border-radius: 5px;
        }
      }
    }
  }
  .bottom_container {
    width: 100%;
    box-sizing: border-box;
    .el-divider {
      margin: 10px 0;
    }
    .header_title {
      width: 100%;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-family: "微软雅黑";
      font-weight: 550;
      .fist_col {
        width: 20%;
        margin-left: 20px;

        font-size: 14px;
        :last-child {
          color: #b4b4b4;
          margin-left: 20px;
        }
      }
      .last_col {
        width: 9%;
        border-left: 1px solid #ccc;
        font-size: 14px;
        padding-left: 20px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        margin-right: 20px;
        .iconfont {
          color: #c5c5c5;
          font-size: 1em;
          margin-left: 10px;
          margin-top: 1px;
          cursor: pointer;
          transition: all 0.5s;
          padding: 5px;
        }
        .iconfont:hover {
          background-color: #dfdfdf8f;
          border-radius: 5px;
          color: #8f8f8f;
        }
      }
    }
    .questions_container {
      width: 100%;
      padding: 10px 15px;
      box-sizing: border-box;
      .row-item {
        width: 100%;
        height: 60px;
        border-top: 1px solid #e3e3e3d2;
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: all 0.2s;
        padding: 3px 0;
        .row-item-title {
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          .item-title {
            font-size: 13px;
          }
          .item-tag {
            margin-top: 5px;
            .tag {
              scale: 0.8;
            }
          }
        }
        .row-item-level {
          width: 7%;
        }
      }
      .row-item:hover {
        cursor: pointer;
        background-color: #ececec65;
      }
    }
  }
}

::-webkit-scrollbar {
  width: 12px; /* 竖向滚动条宽度 */
  height: 13px; /* 横向滚动条宽度 */
}
</style>